<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_background复合属性</title>
    <style>
        div {

            width: 500px;
            height: 500px;
            background: url("../css/Snipaste_2025-07-22_16-54-27.png") no-repeat,
                        url("../css/Snipaste_2025-07-22_17-22-18.png") no-repeat right top,
                        url("../css/Snipaste_2025-07-22_17-22-18.png") no-repeat left bottom,
                        url("../css/Snipaste_2025-07-22_17-22-18.png") no-repeat right bottom;
        }
    </style>
</head>
<body>
<!--
   background:
        语法:
            background: color url repeat position / size origin clip;
        注意
            1.origin和clip的值如果一样，如果只写一个值，则origin和clip都设置;如果设置了两个值，前面的是origin,后面的clip
            2.size的值必须写在position值的后面，并且用 / 分开。
        css3允许元素设置多个背景图片
            background: url("../css/Snipaste_2025-07-22_16-54-27.png") no-repeat,
                        url("../css/Snipaste_2025-07-22_17-22-18.png") no-repeat right top,
                        url("../css/Snipaste_2025-07-22_17-22-18.png") no-repeat left bottom,
                        url("../css/Snipaste_2025-07-22_17-22-18.png") no-repeat right bottom;
-->
<div>这是div</div>
</body>
</html>